<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>返回</text>
			</view>
			<view class="head_mid">
				兑换
			</view>
			<view class="head_right">

			</view>
		</view>
		<view class="padding-box">
			<view class="title_box">
				<text>成员</text>
				<text class="userNum">3/230</text>
			</view>
			<view class="user_box">
				<view class="conent_body content-box">
					<view class="left_body">
						<image mode="aspectFill" src="../../../static/avatar.png"></image>
						<image class="countryimg" src="../../../static/avatar.png" mode=""></image>
					</view>

					<view class="right_body">
						<view class="user_title_box">
							<view class="nickname-and">
								<text class="nickname textOverflow">用户名</text>
							</view>
							<image src="../../../static/wode/zuanshihuiyuan.png" mode="" v-if="level==3"></image>
							<image src="../../../static/wode/baijinhuiyuan.png" mode="" v-else-if="level==2"></image>
							<image src="../../../static/wode/huiyuan.png" mode="" v-else-if="level==1"></image>
							<view v-else></view>
							<view class="img-sex">
								<image class="image_box" v-if="item.sex==2" src="/static/woman.png"></image>
								<image class="image_box" v-else src="/static/man.png"></image>
							</view>
							<view class="zhu_box">
								助
							</view>
							<view class="you_box">
								优
							</view>
							<view class="authentication_box shenfen" v-if="item.overseas_auth" v-text="item.overseas_identity_name"></view>
							<view class="authentication_box2 shenfen" v-else>
								境外身份
							</view>
						</view>


						<view class="common_ys textOverflow">
							掌握语言:
							<text v-if="item.languages!=''">{{item.languages}}</text>
							<text v-else>未知</text>
						</view>
						<view class="common_ys textOverflow">
							偏好:
							<text v-if="item.preference!=''" v-text="item.preference"></text>
							<text v-else>未知</text>
							<view class="guanxi" v-show="item.relation_chain" v-text="item.relation_chain"></view>
							<!-- <view class="" v-show="item.distance!=null&&typeTitle=='附近的人'">{{item.distance}}km</view> -->
						</view>
					</view>
					<view class="state_box">
						[讲台上]
					</view>
				</view>
				<view class="conent_body content-box">
					<view class="left_body left_body2">
						<image mode="aspectFill" src="../../../static/avatar.png"></image>
						<image class="countryimg" src="../../../static/avatar.png" mode=""></image>
					</view>
				
					<view class="right_body">
						<view class="user_title_box">
							<view class="nickname-and">
								<text class="nickname textOverflow" v-text="item.nick_name">用户名</text>
							</view>
							<image src="../../../static/wode/zuanshihuiyuan.png" mode="" v-if="level==3"></image>
							<image src="../../../static/wode/baijinhuiyuan.png" mode="" v-else-if="level==2"></image>
							<image src="../../../static/wode/huiyuan.png" mode="" v-else-if="level==1"></image>
							<view v-else></view>
							<view class="img-sex">
								<image class="image_box" v-if="item.sex==2" src="/static/woman.png"></image>
								<image class="image_box" v-else src="/static/man.png"></image>
							</view>
							<view class="zhu_box">
								助
							</view>
							<view class="you_box">
								优
							</view>
							<view class="authentication_box shenfen" v-if="item.overseas_auth" v-text="item.overseas_identity_name"></view>
							<view class="authentication_box2 shenfen" v-else>
								境外身份
							</view>
						</view>
				
				
						<view class="common_ys textOverflow">
							掌握语言:
							<text v-if="item.languages!=''">{{item.languages}}</text>
							<text v-else>未知</text>
						</view>
						<view class="common_ys textOverflow">
							偏好:
							<text v-if="item.preference!=''" v-text="item.preference"></text>
							<text v-else>未知</text>
							<view class="guanxi" v-show="item.relation_chain" v-text="item.relation_chain"></view>
							<!-- <view class="" v-show="item.distance!=null&&typeTitle=='附近的人'">{{item.distance}}km</view> -->
						</view>
					</view>
					<view class="state_box">
						[离线]
					</view>
				</view>
				<view class="conent_body content-box">
					<view class="left_body left_body2">
						<image mode="aspectFill" src="../../../static/avatar.png"></image>
						<image class="countryimg" src="../../../static/avatar.png" mode=""></image>
					</view>
				
					<view class="right_body">
						<view class="user_title_box">
							<view class="nickname-and">
								<text class="nickname textOverflow" v-text="item.nick_name">用户名</text>
							</view>
							<image src="../../../static/wode/zuanshihuiyuan.png" mode="" v-if="level==3"></image>
							<image src="../../../static/wode/baijinhuiyuan.png" mode="" v-else-if="level==2"></image>
							<image src="../../../static/wode/huiyuan.png" mode="" v-else-if="level==1"></image>
							<view v-else></view>
							<view class="img-sex">
								<image class="image_box" v-if="item.sex==2" src="/static/woman.png"></image>
								<image class="image_box" v-else src="/static/man.png"></image>
							</view>
							<view class="zhu_box">
								助
							</view>
							<view class="you_box">
								优
							</view>
							<view class="authentication_box shenfen" v-if="item.overseas_auth" v-text="item.overseas_identity_name"></view>
							<view class="authentication_box2 shenfen" v-else>
								境外身份
							</view>
						</view>
				
				
						<view class="common_ys textOverflow">
							掌握语言:
							<text v-if="item.languages!=''">{{item.languages}}</text>
							<text v-else>未知</text>
						</view>
						<view class="common_ys textOverflow">
							偏好:
							<text v-if="item.preference!=''" v-text="item.preference"></text>
							<text v-else>未知</text>
							<view class="guanxi" v-show="item.relation_chain" v-text="item.relation_chain"></view>
							<!-- <view class="" v-show="item.distance!=null&&typeTitle=='附近的人'">{{item.distance}}km</view> -->
						</view>
					</view>
					<view class="state_box">
						[离线]
					</view>
				</view>
				<view class="conent_body content-box">
					<view class="left_body">
						<image mode="aspectFill" src="../../../static/avatar.png"></image>
						<image class="countryimg" src="../../../static/avatar.png" mode=""></image>
					</view>
				
					<view class="right_body">
						<view class="user_title_box">
							<view class="nickname-and">
								<text class="nickname textOverflow">用户名</text>
							</view>
							<image src="../../../static/wode/zuanshihuiyuan.png" mode="" v-if="level==3"></image>
							<image src="../../../static/wode/baijinhuiyuan.png" mode="" v-else-if="level==2"></image>
							<image src="../../../static/wode/huiyuan.png" mode="" v-else-if="level==1"></image>
							<view v-else></view>
							<view class="img-sex">
								<image class="image_box" v-if="item.sex==2" src="/static/woman.png"></image>
								<image class="image_box" v-else src="/static/man.png"></image>
							</view>
							<view class="zhu_box">
								助
							</view>
							<view class="you_box">
								优
							</view>
							<view class="authentication_box shenfen" v-if="item.overseas_auth" v-text="item.overseas_identity_name"></view>
							<view class="authentication_box2 shenfen" v-else>
								境外身份
							</view>
						</view>
				
				
						<view class="common_ys textOverflow">
							掌握语言:
							<text v-if="item.languages!=''">{{item.languages}}</text>
							<text v-else>未知</text>
						</view>
						<view class="common_ys textOverflow">
							偏好:
							<text v-if="item.preference!=''" v-text="item.preference"></text>
							<text v-else>未知</text>
							<view class="guanxi" v-show="item.relation_chain" v-text="item.relation_chain"></view>
							<!-- <view class="" v-show="item.distance!=null&&typeTitle=='附近的人'">{{item.distance}}km</view> -->
						</view>
					</view>
					<view class="state_box">
						[讲台上]
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style scoped>
	.head {
		display: flex;
		justify-content: space-between;
		height: 162upx;
		background: #ffffff;
		padding: 0 24upx;
		position: fixed;
		width: 100%;
		top: 0;
	}

	.head image {
		width: 20upx;
		height: 36upx;
		margin-right: 9upx;
	}

	.head_left {
		display: flex;
		align-items: center;
		color: #666666;
		font-size: 32upx;
		padding-top: 70upx;
	}

	.head_mid {
		color: #333333;
		font-size: 36upx;
		padding-top: 90upx;
	}

	.head_right {
		width: 92upx;
	}

	.padding-box {
		padding-top: 182upx;
	}

	.title_box {
		background: #FFFFFF;
		padding: 0 24upx;
		height: 78upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1upx solid #E6E6E6;
		color: #333333;
		font-size: 36upx;
	}
	.userNum{
		color: #999999;
		font-size: 28upx;
	}

	.conent_body {
		height: 125upx;
		padding: 30upx 24upx;
		border-bottom: 1upx solid #F3F3F3;
		background: #fff;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left_body {
		width: 125upx;
		height: 125upx;
		float: left;
		position: relative;
		margin-right: 30upx;

	}

	.right_body {
		height: 125upx;
		display: flex;
		flex-direction: column;

	}

	.left_body image {
		width: 125upx;
		height: 125upx;
		border-radius: 50%;
	}
	.left_body2 image {
		opacity: 0.5;
	
	}

	.left_body .countryimg {
		width: 33upx;
		height: 33upx;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 10;
	}

	.img-sex {
		margin-right: 10upx;
	}
	.nickname-and {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.nickname {
		max-width: 200upx;
		font-size: 30upx;
		line-height: 40upx;
		margin-right: 10upx;
	}
	
	
	.image_box {
		width: 35upx;
		height: 37upx;
	}
	
	.hui_yuan_box {
		position: absolute;
		right: 0;
		width: 120upx;
		height: 35upx;
	}
	
	.authentication {
		overflow: hidden;
		margin-top: 10upx;
		margin-bottom: 10upx;
	}
	
	.authentication_box {
		border: 1upx solid #33cbcc;
		float: left;
		border-radius: 5upx;
		box-sizing: border-box;
		text-align: center;
		line-height: 25upx;
		height: 25upx;
		font-size: 16upx;
		color: #33cbcc;
	}
	
	.authentication_box2 {
		border: 1upx solid #8E8F9F;
		float: left;
		border-radius: 5upx;
		box-sizing: border-box;
		text-align: center;
		line-height: 25upx;
		height: 25upx;
		font-size: 16upx;
		color: #8E8F9F
	}
	
	.shenfen {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 120upx;
		margin-left: 10upx;
		padding: 0 6upx;
	}
	
	.renzheng {
		font-size: 16upx;
		color: #33cbcc;
	}
	.common_ys {
		width: 400upx;
		font-size: 26upx;
		line-height: 48upx;
		color: #999999;
	}
	
	.common_ys text {
		margin: 0 10upx;
	}
	.user_title_box {
		display: flex;
		align-items: center;
		position: relative;
		justify-content: flex-start;
	}
	.zhu_box{
		width: 28upx;
		height: 28upx;
		border-radius: 50%;
		background: #16D0FF;
		color: #FFFFFF;
		font-size: 20upx;
		text-align: center;
		line-height: 28upx;
		margin-right: 10upx;
	}
	.you_box{
		width: 28upx;
		height: 28upx;
		border-radius: 50%;
		background: #3699FF;
		color: #FFFFFF;
		font-size: 20upx;
		text-align: center;
		line-height: 28upx;
	}
	.state_box{
		font-size: 26upx;
		color: #999999;
		width: 98upx;
		text-align: right;
	}
</style>
